<template>
  <div class="creatPostWrap">
    <div class="titleWrap">
      <van-field
        class="title"
        v-model="title"
        rows="1"
        autosize
        type="textarea"
        maxlength="20"
        placeholder="请输入标题"
        show-word-limit
      />
    </div>
    <div class="contentWrap">
      <van-field
        class="content"
        v-model="content"
        rows="10"
        autosize
        type="textarea"
        maxlength="200"
        placeholder="请输入内容"
        show-word-limit
      />
    </div>
    <div class="pictureWrap">
      <van-field name="headPic">
        <template #input>
          <van-uploader
            v-model="pictures"
            :after-read="afterRead"
            :max-count="9"
          />
        </template>
      </van-field>
    </div>
    <div class="modelsWrap">
      <span>模块（必须选择一个）</span>
      <div class="modelWrap">
        <van-tag
          :class="{ modelAc: i === index }"
          class="model"
          v-for="(item, index) in modelList"
          :key="index"
          v-if="+item.status===1&+item.display===1"
          plain
          type="primary"
          size="large"
          @click="chooseModel(item, index)"
          >{{ item.modulename }}</van-tag
        >
      </div>
    </div>
    <div class="submit">
      <van-button round block type="info" @click="submit">发布</van-button>
    </div>
    <cutImage
      ref="cropper"
      :show.sync="showCutImageTool"
      :img="cutImageSrc"
      :autoCrop="true"
      :autoCropWidth="300"
      :autoCropHeight="300"
      :fixed="true"
      @cutImageFinish="cutImageFinish"
      @cutImageCancel="cutImageCancel"
    >
    </cutImage>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import { createPost, getModule, setPostID } from '@/views/api/api.js'
import cutImage from '../../../components/cutImage.vue'
export default {
  components: {
    cutImage
  },
  data () {
    return {
      title: '',
      content: '',
      modulename: '',
      i: null,
      pictures: [],
      user: [],
      modelList: [],
      showCutImageTool: false,
      cutImageSrc: '',
      file: ''
    }
  },
  computed: {},
  created () {
    this.init()
  },
  methods: {
    init () {
      // 初始化，从数据库中获取所有的模块名称
      getModule().then(res => {
        if (res.data.code) {
          // Toast.fail(res.data.msg)
        } else {
          this.modelList = res.data.Info
        }
      })
    },
    chooseModel (item, index) {
      this.modulename = item.modulename
      this.i = index
    },
    submit () {
      if (!this.title) {
        Toast.fail('标题不能为空！')
        return
      }
      if (!this.content) {
        Toast.fail('内容不能为空！')
        return
      }
      if (!this.modulename) {
        Toast.fail('必须选择一个模块')
        return
      }
      this.user = JSON.parse(sessionStorage.getItem('user'))
      let params = {
        title: this.title,
        content: this.content,
        modulename: this.modulename,
        pictures: this.pictures,
        user: this.user[0]
      }
      createPost(params).then(res => {
        if (res.data.code) {
          Toast.fail(res.data.msg)
        } else {
          let params1 = {
            modulename: this.modulename,
            postID: res.data.data._id
          }
          // 把发布成功的帖子id插入到该模块的postID中
          setPostID(params1).then(res => {
            if (res.data.code) {
              // Toast.fail(res.data.msg)
            } else {
            }
          })
          Dialog.alert({
            message: '发布成功'
          }).then(() => {
            this.$emit('Post')
          })
        }
      })
    },
    afterRead (file) {
      if (file.status === 'uploading') {
        file.message = '上传中...'
      } else if (file.status === 'failed') {
        file.message = '上传失败'
      } else {
        file.message = '上传成功'
        this.cutImageSrc = file.content
        // 显示截剪组件
        this.showCutImageTool = true
        this.file = file
      }
    },
    // 显示截剪组件
    changeImage () {
      this.showCutImageTool = true
    },
    // 截剪完成，回调图片base64
    cutImageFinish (data) {
      // 接口上传图片
      this.file.content = data
      this.afterRead(this.file)
    },
    // 点击关闭裁剪
    cutImageCancel () {
      this.headPic = []
    }
  }
}
</script>
<style scoped>
.titleWrap {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.31);
}
.contentWrap {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.31);
  margin: 10px 0;
}
.pictureWrap {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.31);
  margin: 10px 0;
}
.modelsWrap {
  text-align: left;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.31);
  padding: 10px 16px;
}
.model {
  margin: 5px;
}
.modelAc {
  color: #ffffff;
  background: #1989fa;
}
.submit {
  margin: 20px 16px;
}
</style>
